<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../myCss/reset.css"/>
    <link rel="stylesheet" href="../../myCss/pullToRefresh.css"/>
    <style>
        .aui-btn-success{
            background-color: #EE6E73 !important;
            border:1px solid #EE6E73 !important;
            color: #fff !important;
        }
        .scroller li{
            padding: 0 10px;
        }
        /*遮罩层*/

        .z_mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: none;
        }

        .z_alert {
            width:170px;
            height: 100px;
            border-radius: .2rem;
            background: rgba(238, 238, 238, 0.96);
            font-size:21px;
            text-align: center;
            line-height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        #wrapper {
            width: 100%;
            height:65%;
            max-width:640px;
            margin:0 auto;
            background: transparent;
        }
        .sort{
            display: none;
            width: 100%;
            height: 172px;
            position: fixed;
            z-index: 99;
            background: #fff;
            left: 0;
            font-size: 14px;
            text-align: center;
            border-bottom:1px solid #ededed;
        }
        .dist{
            display: none;
            width: 100%;
            height: 170px;
            position: fixed;
            z-index: 99;
            background: #fff;
            left: 0;
            font-size: 14px;
            text-align: center;
            border-bottom:1px solid #ededed;
        }
        .sort div{
            padding: 6px 0;
            border-top:1px solid #ededed;
        }
        .dist div{
            padding: 6px 0;
            border-top:1px solid #ededed;
        }
        .act{
            color: #38c89f;
        }
        .act{
            color: #38c89f;
        }
    </style>
</head>
<body style="overflow-x: hidden">
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left" tapmode onclick="location.href='../helpBuy/index.html'">
        <span class="fa fa-home fa-lg"></span>
    </a>
    <div class="aui-title"><span class="fa fa-map-marker"></span>
        <label style="font-size: 15px;">杭州市</label>
    </div>
</header>
<div class="aui-searchbar" id="search"style="margin-top: 45px">
    <div class="aui-searchbar-input aui-border-radius" tapmode >
        <i class="aui-iconfont aui-icon-search"></i>
        <form action="javascript:search();">
            <input type="search" placeholder="输入购买地地址" id="search-input">
        </form>
    </div>
    <div class="ser">搜索</div>
</div>
<section class="aui-content"style="" >
    <div class="aui-card-list" style="padding-left: 7px">
        <div style="font-size: 14px;color: #3d3d3d;padding: 5px;display: inline-block" ><span id="sortBtn">普通排序 </span><span>▽</span></div>
        <div style="font-size: 14px;color: #3d3d3d;padding: 5px;display: inline-block" ><span id="sortBtn1">全部 </span><span>▽</span></div>
        <div class="sort" id="sort">
            <div class="act" onclick="sortC(this)">普通排序</div>
            <div onclick="sortC(this)">距离优先</div>
            <div onclick="sortC(this)">最新发布</div>
            <div onclick="sortC(this)">小费优先</div>
            <div onclick="sortC(this)">信誉最好</div>
        </div>
        <div class="dist" id="dist">
            <div class="act" onclick="sortD(this)">全部</div>
            <div onclick="sortD(this)">附近500m</div>
            <div onclick="sortD(this)">附近1000m</div>
            <div onclick="sortD(this)">附近2000m</div>
            <div onclick="sortD(this)">附近5000m</div>
        </div>
        <div style="font-size: 14px;color: #3d3d3d;padding: 5px;display: inline-block;float: right;margin-right: 10px" onclick="location.href='../map/orderMap.html'">
            <span id="mapSun" class="fa fa-map" style="color: #f9e73b" ></span><span style="font-size: 11px"> 订单地图</span></div>
    </div>
</section>

<div id="wrapper">
    <ul id="orderUl">
    </ul>
</div>
<!--遮罩层-->
<div class="z_mask">
    <!--弹出框-->
    <div class="z_alert">
        <p>接单成功<span class="fa fa-check"></span></p>
    </div>
</div>

<footer class="aui-bar aui-bar-tab" id="footer-c"></footer>

<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script src="../../myJs/jquery.js"></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script src="../../myJs/iscroll.js"></script>
<script src="../../myJs/pullToRefresh.js"></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }

   /*  var data = {
        "code":"200",
        "msg": [
            {
                "orderId": "1",
                "dist":"0.11km",
                "note": "请最帅的小哥哥接单",
                "purchasePlace": "物美超市",
                "address": "江干区",
                "addressDetails":"文泽路四号大街五号路口",
                "purchaseFindCourierTime": "11：12",
                "courierFees":"20元"
            },
            {
                "orderId": "2",
                "dist":"0.31km",
                "note": "要快点",
                "purchasePlace": "金沙湖龙湖天街四楼",
                "address": "文泽路四号大街五号路口",
                "addressDetails":"文泽路四号大街五号路口",
                "purchaseFindCourierTime": "12：12",
                "courierFees":"12元"
            },
            {
                "orderId": "3",
                "note": "无",
                "dist":"0.41km",
                "purchasePlace": "浙江工商大学",
                "address": "钱江湾生活区",
                "addressDetails":"37幢323",
                "purchaseFindCourierTime": "11：20",
                "courierFees":"8元"
            }
        ]
    } */
    $(function(){
        index();
        $("#item4").addClass("aui-active");
         $.ajax({
         type: "post",
         url: '/randomdelivery/userCourierManageController/courierHome',
         data: { },
         datatype: "json",
         success: function (data) {
        	 alert(JSON.stringify(data));
         viewOrders(data);
         }

         });
        //viewOrders(data);
    });

    function viewOrders(data){
        $.each(data.msg, function (num,data) {
            $("#orderUl").append(' <li>\
                    <div class="aui-card-list" >\
                    <div class="userinfo-header">\
                    <div class="aui-info">\
                    <div class="aui-info-item">\
                    <span class="aui-margin-l-10" style="font-size: 17px;color:#ff740e ">距我 '+data.dist+'</span></span>\
            </div>\
            <div class="aui-info-item" style="padding-right: 10px">'+data.purchaseFindCourierTime+'</div>\
            </div>\
            </div>\
            <div class="aui-card-list-content-padded">\
                    <div style="margin-bottom:5px; ">起：<span>'+data.purchasePlace+'</span></div>\
            <div>到：<span>'+data.address+data.addressDetails+'</span></div>\
            </div>\
            <div class="aui-card-list-content-padded">\
                 <div style="background: #e8e8e8;padding: 8px 10px;margin: 0 -12px">备注：<span>'+data.note+'</span></div>\
            </div>\
            <div class="aui-card-list-footer aui-border-t">\
                 <div style="color: #ff0f09"><span class="fa fa-rmb"></span> '+data.courierFees+'</div>\
                 <div><div style="color: #EE6E73" orderId="'+data.orderId+'" class="aui-btn aui-btn-success aui-btn-sm" type="button" tapmode onclick="confirm(this)">去接单</div>\
                 </div></div></div></li>')
        })

    }
    $("#sortBtn").on("click",function(){
        $(".sort").fadeIn("slow");
    })
    function sortC(node){
        $(".sort div").removeClass("act");
        var sortBtn = $("#sortBtn").html()
        var method = node.innerHTML;
        node.className='act';
        $(".sort").fadeOut("slow");
        $("#sortBtn").html(method);
        //alert(sortBtn);
    }
    
    /*距离排序*/
    $("#sortBtn1").on("click",function(){
        $("#dist").fadeIn("slow");
        $("#sort").hide();
    })
    function sortD(node){
        $(".dist div").removeClass("act");
        var sortBtn1 = $("#sortBtn1").html()
        var method = node.innerHTML;
        node.className='act';
        $(".dist").fadeOut("slow");
        $("#sortBtn1").html(method);
        //alert(sortBtn);
    }
    
</script>
<script>
    refresher.init({
        id:"wrapper",
        pullDownAction:Refresh,
        pullUpAction:Load
    });
    function Refresh() {
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            //这里写你的刷新代码
            document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";
            setTimeout(function () {
                wrapper.refresh();
                var el, li, i;
                el =document.querySelector("#wrapper ul");
                $.each(data.msg,function(num,data){
                    li = document.createElement('li');
                    li.innerHTML = ' <div class="aui-card-list">\
                    <div class="userinfo-header">\
                    <div class="aui-info">\
                    <div class="aui-info-item">\
                    <span class="aui-margin-l-10" style="font-size: 17px;color:#ff740e ">距我 '+data.dist+'</span></span>\
            </div>\
            <div class="aui-info-item" style="padding-right: 10px">'+data.purchaseFindCourierTime+'</div>\
            </div>\
            </div>\
            <div class="aui-card-list-content-padded">\
                    <div style="margin-bottom:5px; ">起：<span>'+data.purchasePlace+'</span></div>\
            <div>到：<span>'+data.address+data.addressDetails+'</span></div>\
            </div>\
            <div class="aui-card-list-content-padded">\
                 <div style="background: #e8e8e8;padding: 8px 10px;margin: 0 -12px">备注：<span>'+data.note+'</span></div>\
            </div>\
            <div class="aui-card-list-footer aui-border-t">\
                 <div style="color: #ff0f09"><span class="fa fa-rmb"></span> '+data.courierFees+'</div>\
                 <div><div style="color: #EE6E73" class="aui-btn aui-btn-success aui-btn-sm" type="button" tapmode onclick="confirm(this)">去接单</div>\
                 </div></div></div>';
                    el.insertBefore(li, el.childNodes[0]);
                })
            },1000);//模拟qq下拉刷新显示成功效果
            /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
        }, 1000);
    }
    function Load() {
        setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            $.each(data.msg,function(num,data){
                li = document.createElement('li');
                li.innerHTML=' <div class="aui-card-list">\
                    <div class="userinfo-header">\
                    <div class="aui-info">\
                    <div class="aui-info-item">\
                    <span class="aui-margin-l-10" style="font-size: 17px;color:#ff740e ">距我 '+data.dist+'</span></span>\
            </div>\
            <div class="aui-info-item" style="padding-right: 10px">'+data.purchaseFindCourierTime+'</div>\
            </div>\
            </div>\
            <div class="aui-card-list-content-padded">\
                    <div style="margin-bottom:5px; ">起：<span>'+data.purchasePlace+'</span></div>\
            <div>到：<span>'+data.address+data.addressDetails+'</span></div>\
            </div>\
            <div class="aui-card-list-content-padded">\
                 <div style="background: #e8e8e8;padding: 8px 10px;margin: 0 -12px">备注：<span>'+data.note+'</span></div>\
            </div>\
            <div class="aui-card-list-footer aui-border-t">\
                 <div style="color: #ff0f09"><span class="fa fa-rmb"></span> '+data.courierFees+'</div>\
                 <div><div style="color: #EE6E73" class="aui-btn aui-btn-success aui-btn-sm" type="button" tapmode onclick="confirm(this)">去接单</div>\
                 </div></div></div>';
                el.appendChild(li, el.childNodes[0]);
            })
            wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
        },1000);
    }
</script>
<script>
    function confirm(node){
        $(".z_mask").show().delay(2000).hide(300,function(){
        	 var orderId = node.getAttribute("orderId");
             $.ajax({
             type: "post",
             url: '/randomdelivery/userCourierManageController/acceptOrder',
             data: {orderId:orderId },
             datatype: "json",
             success: function (data) {
            	 alert(JSON.stringify(data));
            	 var parent = node.parentNode.parentNode.parentNode;
                 parent.remove();
             }

             });
            
        });
    }
</script>
</body>
</html>